import "./Banner.scss";
import TrackVisibility from 'react-on-screen';
import Type from "@animation/Type"

const Banner = () => {

  return (
    <section className="banner-com" id="home">
      <div className="show-box">
        <div className="font-box">
          <p className="title">Welcome to my Portfolio</p>
          <Type prefix="Hi! I'm sishen " font={[" Web Developer", " Node Backend Engineer", " TDD Driver", " Game Developer"]} />
          <p className="intro">
            I like to create beautiful web, use Node to create RESTful API.
            I enjoy this process and now my goal is to create games that
            everyone likes, immortal like Hero3.
          </p>
          <div className="connect" onClick={() => { location.replace("#connect") }}>
            <p>Let&apos;s connect</p>
            <img src="/src/assets/img/left.svg" alt="->" />
          </div>
        </div>
        <TrackVisibility once>
          {({ isVisible }) =>
            <img className={isVisible ? "head-img active" : "head-img"} src="/src/assets/img/header-img.svg" alt="Header Img" />
          }
        </TrackVisibility>
      </div>
    </section>
  )
}

export default Banner
